iT邦幫忙

DAY 8
0

Node.js 學習筆記系列 第 8

Node.js學習筆記七:Express.js網頁修改

  • 分享至 

  • xImage
  •  

上一篇,我們瞭解了Express.js創建的專案的檔案架構,也看過package.json,對Express.js有了基本的認識,今天我們來真正地修改網頁。

一、用"npm start"加"nodemon"來啟動程式。

先來補充一點程式啟動的東西。之前我們安裝了"nodemon"用來監視程式,一旦有改動就自動幫我們重新啟動程式。上一篇的package.json裡面的"scripts"段,我們提過那是啟動script。你會看到它是用"node"來啟動,而不是用"nodemon"。要用"nodemon"只要改package.json就可以:

"scripts": {
    "start": "nodemon ./bin/www"
  },

可以看到只是將"node"改為"nodemon"。接著就可以用"npm start"來啟動程式,這是express.js建議的方式。

二、Express.js的路由(Routing)。

程式啟動後,打開瀏覽器,你會看到以下歡迎畫面。

要修改這個頁面,關係兩個部分。第一個部分是路由(routes);第二個部分是模版(views)。先看路由,打開"/routes/index.js"文件。

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

可以看到,這裡用express.Router(),能夠很方便地處理路由的問題。從router.get()我們能瞭解大致是怎樣對不同的頁面進行路由。其中"res.render()"中的render()是指對模版進行編繹(並將變數放進去),這裡是將"title"這個變數(值為"Express")送到"index"這個模版裡。這個模版自然是"/views/index.hjs"。

三、Express.js的模版文件。

我們用Hogan.js作為模版引擎,所以後綴為".hjs",如果你用Jade作為模版引擎的話,後綴會是".jade",如此類推。以下是"index.hjs"的內容:

    <title>{{ title }}</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  
  
    <h1>{{ title }}</h1>
    <p>Welcome to {{ title }}</p>
  

跟HTML基本上一樣,只是多了變數:用"{{ 變數 }}"來表示。這裡只有"title"一個變數,正是由"/routes/index.js"送過來的,值為"Express"。

現在回到"/routes/index.js",將"title"的值改為"New Title"試試看:

router.get('/', function(req, res) {
  res.render('index', { title: 'New title' });
});

然後刷新網頁看看效果。

[image credit: Geoffrey Arduini]


上一篇
Node.js學習筆記六:Express.js專案目錄架構與package.json
下一篇
Node.js學習筆記八:看懂Express的app.js
系列文
Node.js 學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言